<%@page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<input type="hidden" name="selectPage" id="selectPage" value="${pageBean.selectPage}"/>
<input type="hidden" name="pageRows" id="pageRows" value="${pageBean.pageRows}"/>
<input type="hidden" name="orderField" id="orderField" value="${pageBean.orderField}"/>
<input type="hidden" name="orderType" id="orderType" value="${pageBean.orderType}"/>
<input type="hidden" name="allPage" id="allPage" value="${pageBean.allPage}"/>
<input type="hidden" name="defaultRows" id="defaultRows" value="${pageBean.defaultRows}"/>
<c:if test="${!empty pageBean.pageData}">
<script>
	$(function() {
		$("#first").button({
            icons: {
                primary: "ui-icon-seek-first"
            },
          		text: false
        });
        $("#prev").button({
            icons: {
                primary: "ui-icon-seek-prev"
            },
          		text: false
        });
        $("#next").button({
            icons: {
                primary: "ui-icon-seek-next"
            },
          		text: false
        });
        $("#end").button({
            icons: {
                primary: "ui-icon-seek-end"
            },
          		text: false
        });
        $("#go").button({
            icons: {
                primary: "ui-icon-circle-arrow-e"
            },
          		text: false
        });
		$(".grid-tr-0").css("background-color", "#E9E9E4");
		$(".grid-tr-0").hover(function(){
			$(this).css("background-color", "#FFD119");
			},function(){
			$(this).css("background-color", "#E9E9E4");
		});
		$(".grid-tr-1").hover(function(){
			$(this).css("background-color", "#FFD119");
			},function(){
			$(this).css("background-color", "#FFFFFF");
		});
		if ("${pageBean.orderType}" == "ASC") {
			if (document.getElementById("${pageBean.orderField}") && document.getElementById("${pageBean.orderField}").tagName == "SPAN") {
				document.getElementById("${pageBean.orderField}").className = "ui-icon ui-icon-triangle-1-n";
			} else if (document.getElementById("${pageBean.orderField}")) {
				var lsSpan = document.getElementsByTagName("SPAN");
				for (var i = 0; i < lsSpan.length; i++) {
					var span = lsSpan[i];
					if ("${pageBean.orderField}" == span.id) {
						span.className = "ui-icon ui-icon-triangle-1-n";
						break;
					}
				}
			}
		} else if ("${pageBean.orderType}" == "DESC") {
			if (document.getElementById("${pageBean.orderField}") && document.getElementById("${pageBean.orderField}").tagName == "SPAN") {
				document.getElementById("${pageBean.orderField}").className = "ui-icon ui-icon-triangle-1-s";
			} else if (document.getElementById("${pageBean.orderField}")) {
				var lsSpan = document.getElementsByTagName("SPAN");
				for (var i = 0; i < lsSpan.length; i++) {
					var span = lsSpan[i];
					if ("${pageBean.orderField}" == span.id) {
						span.className = "ui-icon ui-icon-triangle-1-s";
						break;
					}
				}
			}
		}
	});
	
	function pageControl(mode, fld) {
		var frm = document.getElementById(document.getElementById("formPage").value);
		var selectPage = document.getElementById("selectPage");
		var pageRows = document.getElementById("pageRows");
		var orderField = document.getElementById("orderField");
		var orderType = document.getElementById("orderType");
		var allPage = document.getElementById("allPage");
		var pageNum = new Number(selectPage.value);
		var allPageNum = new Number(allPage.value);
		if (mode == "G") {
			var page = new Number(document.getElementById(fld).value);
			if (page > 0 && page <= allPageNum) {
				selectPage.value = page;
			}
		} else if (mode == "F") {
			selectPage.value = 1;
		} else if (mode == "P") {
			if (pageNum > 1) {
				selectPage.value = pageNum - 1;
			}
		} else if (mode == "N") {
			if ((pageNum + 1) <= allPageNum) {
				selectPage.value = pageNum + 1;
			}
		} else if (mode == "E") {
			selectPage.value = allPage.value;
		} else if (mode == "S") {
			if (fld == orderField.value) {
				if (orderType.value == "ASC") {
					orderType.value = "DESC";
				} else {
					orderType.value = "ASC";
				}
			} else {
				orderField.value = fld;
				orderType.value = "ASC";
			}
		}
		frm.submit();
    }
       
    function setPage(p) {
		var allPage = document.getElementById("allPage");
		var allPageNum = new Number(allPage.value);
		if (p > 0 && p <= allPageNum) {
    		document.getElementById("selectPage").value = p;
    	}
    }
    
    function setRows(r, a) {
    	if (r > a) {
    		r = a;
    	}
    	document.getElementById("pageRows").value = r;
    	document.getElementById("defaultRows").value = r;
    }
</script>
<table cellpadding="2" cellspacing="2" border="0" height="20px" width="100%" style="border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;">
<tr>
<td width="40%" align="left">&nbsp;<font size="2">แสดง <input type="text" name="rows" id="rows" size="2" style="text-align: right;" maxlength="6" value="${pageBean.pageRows}" onkeypress="setRows(this.value, ${pageBean.allItems});" onblur="setRows(this.value, ${pageBean.allItems});" ${pageBean.selectPage == '1' ? '' : 'disabled'}> รายการ</font></td>
<td align="center">
<button id="first" type="button" class="acc67-button" onclick="pageControl('F', '');">first</button>&nbsp;
<button id="prev" type="button" class="acc67-button" onclick="pageControl('P', '');">prev</button>&nbsp;
<button id="next" type="button" class="acc67-button" onclick="pageControl('N', '');">next</button>&nbsp;
<button id="end" type="button" class="acc67-button" onclick="pageControl('E', '');">end</button>
</td>
<td width="40%" align="right"><font size="2">ไปที่หน้า</font>&nbsp;
<input type="text" name="go2Page" id="go2Page" size="2" style="text-align: right;" maxlength="6" value="${pageBean.selectPage}" onkeypress="setPage(this.value);" onblur="setPage(this.value);">&nbsp;
<button id="go" type="submit" class="acc67-button" onclick="pageControl('G', 'go2Page');">go</button>&nbsp;
</td>
</tr>
<tr>
<td align="center" colspan="3">&nbsp;<font size="2">ข้อมูลทั้งหมด ${pageBean.allItems} รายการ แสดงหน้าที่ ${pageBean.selectPage} จากทั้งหมด ${pageBean.allPage} หน้า</font></td>
</tr>
</table>
</c:if>